import { create } from 'zustand';
import { nanoid } from 'nanoid';

//zustand--使用介绍 https://blog.csdn.net/weixin_42268006/article/details/135989115

const mockData1 = [
  {
    sortId: 1,
    id: nanoid(),
    type: 'Text',
    blockWidth: 500,
    blockHeight: 250,
    content:
      '我的第一个PPT我的第一个PPT我的第一个PPT我的第一个PPT我的第一个PPT我的第一个PPT我的第一个PPT我的第一个PPT我的第一个PPT我的第一个PPT',
    fontColor: '#000000',
    fontSize: 3,
    fontWight: 800,
  },
  {
    sortId: 2,
    id: nanoid(),
    type: 'Image',
    blockWidth: 500,
    blockHeight: 250,
    imageUrl:
      'https://img.shetu66.com/2022/08/cutCoverImg/1663066396114446.jpg?x-oss-process=image/resize,h_900/format,webp',
    describe: '万圣节',
  },
  {
    sortId: 3,
    id: nanoid(),
    type: 'Video',
    blockWidth: 500,
    blockHeight: 250,
    videoUrl:
      'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4',
    autoPlay: false,
  },
  {
    sortId: 5,
    id: nanoid(),
    type: 'Code',
    blockWidth: 500,
    blockHeight: 250,
    content: `
    def greet(name):
    print(f"Hello, {name}!")
    greet("World")`,
    fontSize: 1,
  },
];

const mockData2 = [
  {
    sortId: 1,
    id: nanoid(),
    type: 'Text',
    blockWidth: 500,
    blockHeight: 250,
    content: '我是第二张',
    fontColor: '#000000',
    fontSize: 3,
    fontWight: 800,
  },
  {
    sortId: 2,
    id: nanoid(),
    type: 'Code',
    blockWidth: 500,
    blockHeight: 250,
    content: `
    function greet(name) {
        console.log("Hello, " + name + "!");
    }
    greet("World");
    `,
    fontSize: 1,
  },
  {
    sortId: 3,
    id: nanoid(),
    type: 'Code',
    blockWidth: 500,
    blockHeight: 250,
    content: `
    #include <stdio.h>
    int main() {
        printf("Hello, World!");
        return 0;
    }`,
    fontSize: 1,
  },
  {
    sortId: 4,
    id: nanoid(),
    type: 'Code',
    blockWidth: 500,
    blockHeight: 250,
    content: `
    def greet(name):
    print(f"Hello, {name}!")
    greet("World")`,
    fontSize: 1,
  },
];

interface PresentationStore {
  sildeFatherId: string;
  slideFatnerList: any[];
  slideTitle: string;
  slideList: any[];
  presentations: any[];
  currentPresentation: any | null;
  currentSlideIndex: number;
  addSlide: () => void;
  updateSlide: (newSlideList: any[]) => void;
  updateSlideTitle: (newSlideTitle: any) => void;
  deleteSlide: (newSlideList: any[]) => void;
  setCurrentPresentation: (index: number) => void;
  updateAnyData: (newData: any) => void;
}

export const useStore = create<PresentationStore>((set) => ({
  sildeFatherId: '', // 幻灯片多组时的一个item的id
  slideFatnerList: [
    {
      id: nanoid(),
      slideTitle: '我是标题',
      slideList: [
        {
          sortId: 1,
          id: nanoid(),
          elements: [],
        },
      ],
    },
  ],
  slideList: [
    {
      sortId: 1,
      id: nanoid(),
      elements: [],
    },
  ],
  // slideList: [
  //   {
  //     sortId: 1,
  //     id: nanoid(),
  //     elements: mockData1 || [],
  //   },
  //   {
  //     sortId: 2,
  //     id: nanoid(),
  //     elements: mockData2 || [],
  //   },
  //   {
  //     sortId: 3,
  //     id: nanoid(),
  //     elements: [],
  //   },
  // ],
  currentSlideIndex: 1, // 当前幻灯片索引
  slideTitle: '我是标题',
  // 我的结束***
  presentations: [],
  currentPresentation: null,
  // 设置-当前幻灯片--index
  setCurrentPresentation: (index) => {
    set((state) => ({
      currentSlideIndex: index,
    }));
  },
  // 新增空白幻灯片
  addSlide: () => {
    set((state) => {
      // if (!state.currentPresentation) return state;
      const newSlide: any = {
        sortId: state.slideList.length + 1,
        id: nanoid(),
        elements: [],
      };
      const slideListBro = [...state.slideList, newSlide];
      return {
        slideList: slideListBro,
      };
    });
  },
  // 更新幻灯片中的元素--新增或者修改
  updateSlide: (newSlideList) => {
    set((state) => ({
      slideList: newSlideList,
    }));
  },
  deleteSlide: (newSlideList) => {
    set((state) => ({
      slideList: newSlideList,
      currentSlideIndex: 1,
    }));
  },
  updateSlideTitle: (newSlideTitle) => {
    set((state) => ({
      slideTitle: newSlideTitle,
    }));
  },
  updateAnyData: (newData: any) => {
    set((state) => ({
      ...newData,
    }));
  },

  // 我的结束***
}));
